iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0
Modern Web

為期 N 天的 react 小冒險系列 第 1

時間是2022,重新回到React的世界QQ

  • 分享至 

  • xImage
  •  

學如逆水行舟,不進則退
工作中沒使用的技術早就全還回去了~
退惹兩三年的我決定重新開始這次的鐵人賽,順便複習以前學習過的概念xd

基本上之前(兩年前)已經稍微寫了一點 React 的皮毛概念
這次文章的安排會直接跳過一些部分(ex:npm / npx安裝 / create-react-app / jsx)
重點會偏向比較新的 react hooks + react functional component 的使用上

這次的目標後半段會以寫一些由 React 組成的小元件來作為這次的文章主軸
希望可以達到複習觀念 + 實際應用的效果~

那麼大家請多多指教了,希望可以順利撐到完賽

目錄

Day1-前言及目錄
Day2-快速複習一下js-上(callback / destructuring)
Day3-快速複習一下js-下(array method / arrow function)
Day4-class component vs functional component
Day5-props vs state (使用場合 / 分別)
Day6-傳遞 props 的方法 / props.children / 設置 props 預設值

Day7-這批函式純不純 pure function vs impure function
Day8-react hook fundamental
Day9-useState / useEffect / useContext(有缺 待補完整)
Day10-用react hook寫一個倒數計時器吧-上
Day11-用react hook寫一個倒數計時器吧-下
Day12-用react hook寫一個骰子遊戲吧-上
Day13-用react hook寫一個骰子遊戲吧-下
Day14-用 react hook 寫一個 bmi 計算機(useReducer)


Day15-useReducer / useMemo / useCallback / useRef

Day??-useLayoutEffect vs useEffect
Day??-react router
Day??-用react hook寫todo-list
Day??-redux
Day??-用react hook寫hang-man-game 猜字謎遊戲
Day??-react with axios
Day??-用react hook寫weather-card(call api)

因為沒有很有信心每個都寫的出來,容我先存在草稿裡
...隨進度更新XD

一些參考資料

The Modern React Bootcamp - 線上課程
https://thevalleyofcode.com/react/
https://www.freecodecamp.org/news/free-react-course-2022/
https://zh-hant.reactjs.org/


下一篇
快速複習一下 react 中常用的 js (Callback function/ Destructuring assignment)-day2
系列文
為期 N 天的 react 小冒險30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言